
.uc-login-page {
  background: #B4ACA1 url("../../images/login_page_back.png") no-repeat center 80%;
  background-size: 100%;
  .page-content {
    background-color: transparent;
    //background: rgba(71,48,19,0.40);
  }
}

.login-logo {
  position: relative;
  margin-top: (80/@font-size-base)*1rem;
  .flexbox();
  width: 100%;
  padding-top: 40%;
  background: url("../../images/login_logo.png") no-repeat center;
  background-size: 67.73333333% 100%;
}

.login-content {
  position: relative;
  margin-top: (30/@font-size-base)*1rem;
  .flexbox();
  width: 100%;
  box-sizing: border-box;
  padding: 0 (34/@font-size-base)*1rem;
  flex-direction: column;

  .input-box {
    position: relative;
    margin-top: (15/@font-size-base)*1rem;
    width: 100%;
    padding: (10/@font-size-base)*1rem (30/@font-size-base)*1rem;
    box-sizing: border-box;
    .hairline(bottom, RGBA(255, 255, 255, .5));
    &:first-child {
      margin-top: 0;
    }
    &.user-name {
      background: url("../../images/login_user_name.png") no-repeat left center;
      background-size: (26/@font-size-base)*1rem;
    }
    &.user-password {
      background: url("../../images/loing_user_password.png") no-repeat left center;
      background-size: (26/@font-size-base)*1rem;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"]{
      box-sizing: border-box;
      background: transparent;
      color: RGBA(255, 255, 255, .95);
      height: (35/@font-size-base)*1rem;
      line-height: (25/@font-size-base)*1rem;
      border: 0;
      font-size: (16/@font-size-base)*1rem;
      padding: (5/@font-size-base)*1rem (12/@font-size-base)*1rem;

      &::placeholder,
      &::-webkit-input-placeholder {
        color: RGBA(255, 255, 255, .5);
      }
    }
  }

  .button-box{
    margin-top: (35/@font-size-base)*1rem;
    margin-bottom: (70/@font-size-base)*1rem;
    p {
      margin: (10/@font-size-base)*1rem 0;
      text-align: center;
      font-size: (14/@font-size-base)*1rem;
      color: RGBA(255, 255, 255, .5);
    }
    .button {
      height: (44/@font-size-base)*1rem;
      line-height: (44/@font-size-base)*1rem;
      font-size: (16/@font-size-base)*1rem;
    }
  }
  .small-text {
    margin-bottom: (10/@font-size-base)*1rem;
    text-align: center;
    font-size: (12/@font-size-base)*1rem;
    color: RGBA(255, 255, 255, .5);
    a {
      color: RGBA(255, 255, 255, 1);
      &.active-state {
        color: RGBA(255, 255, 255, .5);
      }
    }
  }
}